<template>
  <Card :tab-list="tabListTitle" v-bind="$attrs" :active-tab-key="activeKey" @tabChange="onTabChange">
    <p v-if="activeKey === 'Water_weight_everymonth'">
      <WeightBar :weightData="weightData" />
    </p>
    <p v-if="activeKey === 'Water_amount_everymonth'">
      <AmountBar :amountData="amountData" />
    </p>
    <p v-if="activeKey === 'Water_times_everymonth'">
      <TimesBar :timesData="timesData" />
    </p>
  </Card>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Card } from 'ant-design-vue';
  import WeightBar from './WeightBar.vue';
  import AmountBar from './AmountBar.vue';
  import TimesBar from './TimesBar.vue';
  import { Item } from '../data';
  import { getHotWaterMonthStatistic } from '../api';

  const weightKey = 'Water_weight_everymonth'; // 每月消费吨数
  const amountKey = 'Water_amount_everymonth'; // 消费扣款金额
  const timesKey = 'Water_times_everymonth'; // 消费次数
  const weightData = ref({}); // 每月消费吨数
  const amountData = ref({}); // 消费扣款金额
  const timesData = ref({}); // 消费次数
  const activeKey = ref(weightKey);
  const tabListTitle = [
    {
      key: weightKey,
      tab: '消费吨数统计',
    },
    {
      key: amountKey,
      tab: '扣款金额统计',
    },
    {
      key: timesKey,
      tab: '消费次数统计',
    },
  ];

  const filterFun = (target: string, res: Item[]) => {
    return res.filter((item) => item.dataCallStoredProcedure === target);
  };

  const getHotWaterMonthStatisticFun = async () => {
    const res = await getHotWaterMonthStatistic({});
    const weightDataO = {};
    const amountDataO = {};
    const timesDataO = {};
    res.forEach((element: { year: string | number; statisticsVOList: Item[] }) => {
      weightDataO[element.year] = filterFun(weightKey, element.statisticsVOList);
      amountDataO[element.year] = filterFun(amountKey, element.statisticsVOList);
      timesDataO[element.year] = filterFun(timesKey, element.statisticsVOList);
    });
    weightData.value = weightDataO;
    amountData.value = amountDataO;
    timesData.value = timesDataO;
  };

  function onTabChange(key: string) {
    activeKey.value = key;
  }

  getHotWaterMonthStatisticFun();
</script>
